
<template>
    <div style="width: 100%;height: 100%;">
 <div
id="yjsjpm"
class="w-100 "
style="height: 90%; position: relative"
></div>  
</div>
</template>

<script setup lang='ts'>
import * as echarts from "echarts";

//模拟数据
var data = [{
"名称": "应急部门",
"面积数值_BA_2": 55
}, {
"名称": "城管部门",
"面积数值_BA_2": 32
}, {
"名称": "交通部门",
"面积数值_BA_2": 29
}, {
"名称": "水务部门",
"面积数值_BA_2": 12
}, {
"名称": "市政部门",
"面积数值_BA_2": 10
}, 

]
var orgOptions = {
"linkExtendList": [],
"sortDataList": [{
"col": "面积数值",
"Merge": false,
"series": {
"percentile": false,
"tooltip": {
  "show": true
},
"label": {
  "normal": {
     "dataLabelWereset": false,
     "show": false,
     "textStyle": {
        "fontFamily": "sans-serif",
        "color": "#000000",
        "fontSize": "12",
        "fontStyle": "normal",
        "fontWeight": "normal"
     }
  }
},
"decimaldigits": 0
},
"merge": false,
"sort": "desc",
"sortable": false
}, {
"col": "名称",
"Merge": false,
"colType": "varchar2",
"display": true,
"merge": false,
"values": [],
"id": "e9457763-c257-4abc-8ecc-1278cb3ac3c6",
"sortable": false,
"type": "eq"
}],
"chart_type": "metaPortlet",
"keys": [{
"col": "名称",
"Merge": false,
"colType": "varchar2",
"display": true,
"merge": false,
"values": [],
"alias": "名称",
"id": "e9457763-c257-4abc-8ecc-1278cb3ac3c6",
"sortable": false,
"type": "eq"
}],
"seriesCommon": {
"label": {
"normal": {
  "rotate": 0,
  "distance": 5,
  "offset": [0, 0],
  "dataLabelWereset": false,
  "show": true
}
}
},
"values": [{
"cols": [{
"col": "面积数值_BA_2",
"colDataType": "NUMBER",
"expCalFormulaReplace": "",
"series": {
  "Insideoption": {
     "valuetype": "5",
     "valueStyle": {
        "fontFamily": "sans-serif",
        "color": "#000000",
        "fontSize": "12",
        "fontStyle": "normal",
        "fontWeight": "normal"
     },
     "text": "",
     "textStyle": {
        "fontFamily": "sans-serif",
        "color": "#000000",
        "fontSize": "12",
        "fontStyle": "normal",
        "fontWeight": "normal"
     },
     "type": "1"
  },
  "animationDelayTime": "",
  "percentile": false,
  "lineStyle": {
     "type": "solid"
  },
  "tooltip": {
     "show": true
  },
  "symbolShow": true,
  "label": {
     "normal": {
        "show": false,
        "textStyle": {
           "fontFamily": "sans-serif",
           "color": "#000000",
           "fontSize": "12",
           "fontStyle": "normal",
           "fontWeight": "normal"
        }
     }
  },
  "symbolNotShow": false,
  "decimaldigits": 0
},
"seriesType": "bar",
"display": true,
"expCalFormula": "",
"width": 0,
"alias": "面积数值",
"sortable": false,
"aggregate_type": "sum",
"decimaldigits": 0
}],

}],
"option": {
"BAMetaAttributes": {
"configshowslider": "1",
"xuhaofontsize": 16,
"fontsizeright": 16,
"configautoslider": "1",
"configpagesize": 4,
"leftpadding": 30,
"attrname": "个",
"rightpadding": 20,
"fontsizeleft": 16,
"xuhaorightpadding": 50
}
}

}



var config_pagesize = orgOptions.option.BAMetaAttributes.configpagesize - 1;;
var config_showslider = orgOptions.option.BAMetaAttributes.configshowslider;
var config_autoslider = orgOptions.option.BAMetaAttributes.configautoslider;
var fontsizeleft = orgOptions.option.BAMetaAttributes.fontsizeleft;
var fontsizeright = orgOptions.option.BAMetaAttributes.fontsizeright;
var attrname = orgOptions.option.BAMetaAttributes.attrname ? orgOptions.option.BAMetaAttributes.attrname : '';
var leftpadding = orgOptions.option.BAMetaAttributes.leftpadding != null ? orgOptions.option.BAMetaAttributes
.leftpadding : 10;
var xuhaofontsize = orgOptions.option.BAMetaAttributes.xuhaofontsize != null ? orgOptions.option.BAMetaAttributes
.xuhaofontsize : 28;
var rightpadding = orgOptions.option.BAMetaAttributes.leftpadding != null ? orgOptions.option.BAMetaAttributes
.rightpadding : 60;
var xuhaorightpadding = orgOptions.option.BAMetaAttributes.xuhaorightpadding != null ? orgOptions.option
.BAMetaAttributes.xuhaorightpadding : 0;


var h1keyName = orgOptions.keys[0].col;
var z1keyName = orgOptions.values[0].cols[0].col;

var dataSource:any = [];
var dataSourcebg = [];
var maxNum = 0;
for (let index = 0; index < data.length; index++) {
const element:any = data[index];
let tempitem = {
value: element[z1keyName],
name: element[h1keyName],
xuhao: index + 1,
}
dataSource.push(tempitem);
dataSourcebg.push(100);
if (element[z1keyName] > maxNum) {
maxNum = element[z1keyName];
}
}
var maxArr = data.map((item) => maxNum);
console.log('dataSource', dataSource)

const img1 =
'';
const img2 =
'';
const img3 =
'';
const img4 =
'';

let option = {
grid: [{
left: leftpadding,
top: 13,
right: rightpadding,
bottom: 2,
containLabel: true,
},],
xAxis: [{
gridIndex: 0,
type: 'value',
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
},
{
gridIndex: 0,
type: 'value',
max: 100,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
},
],
yAxis: [{
gridIndex: 0,
type: 'category',
inverse: true,
position: 'left',
data: dataSource.map((item:any) => item.name),
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
width: xuhaofontsize * 2.5,
padding: [0, 0, 20, -95 + xuhaorightpadding],
align: 'left',
formatter: (name:any, index:any) => {
  let tempValue;
  for (var i = 0; i < dataSource.length; i++) {
     if (dataSource[i].name === name) {
        tempValue = dataSource[i].xuhao;
     }
  }

  const id = tempValue;
  if (id < 4) {
     return `{icon${id}|${id}}`;
  } else {
     return `{count|${id}}`;
  }
},
rich: {
  icon1: {
     width: xuhaofontsize * 1.5,
     height: xuhaofontsize * 1.5,
     align: 'center',
     padding: [0, 0, 2, 0],
     backgroundColor: {
        image: img1,
     },
     color: '#ffffff',
     fontSize: xuhaofontsize,
  },
  icon2: {
     width: xuhaofontsize * 1.5,
     height: xuhaofontsize * 1.5,
     padding: [0, 0, 2, 0],
     align: 'center',
     backgroundColor: {
        image: img2,
     },
     color: '#ffffff',
     fontSize: xuhaofontsize,
  },
  icon3: {
     width: xuhaofontsize * 1.5,
     height: xuhaofontsize * 1.5,
     padding: [0, 0, 2, 0],
     align: 'center',
     backgroundColor: {
        image: img3,
     },
     color: '#ffffff',
     fontSize: xuhaofontsize,
  },
  count: {
     width: xuhaofontsize * 1.5,
     height: xuhaofontsize * 1.5,
     padding: [0, 0, 2, 0],
     align: 'center',
     backgroundColor: {
        image: img4,
     },
     color: '#ffffff',
     fontSize: xuhaofontsize,
  }
},
},
},],

series: [{
name: '背景',
type: 'bar',
barWidth: 6,
barGap: '-100%',
xAxisIndex: 0,
yAxisIndex: 0,
data: maxArr,
itemStyle: {
normal: {
  color: '#02BAF433',
  barBorderRadius: [30, 30, 30, 30],
},
},
label: {
show: true,
offset: [40, 0],
color: '#00C0FD',
fontSize: fontsizeright,
fontWeight: 500,
position: 'right',
align: 'right',
formatter: function (params:any) {
  let tempValue;
  for (var i = 0; i < dataSource.length; i++) {
     if (dataSource[i].name === params.name) {
        tempValue = dataSource[i].value;
     }
  }
  return tempValue + attrname;
}
}
},
{
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: 6,
data: dataSource,
silent: true,
label: {
show: true,
offset: [10, -16],
color: '#fff',
fontSize: fontsizeright,
fontWeight: 500,
position: 'left',
align: 'left',
formatter: function (params:any) {
  return params.data.name;
}
},
itemStyle: {
emphasis: {
  barBorderRadius: [0, 20, 20, 0],
},
normal: {
  barBorderRadius: [0, 20, 20, 0],
  color: function (param:any) {
     return new echarts.graphic.LinearGradient(
        0,
        0,
        1,
        0,
        [{
           offset: 0,
           color: '#00C0FD00', // 0% 处的颜色
        },
        {
           offset: 1,
           color: '#00C0FD', // 100% 处的颜色
        },
        ],
        false
     )
  },
},
},
},
{
type: 'pictorialBar',
data: dataSource.map((item:any) => item.value),
xAxisIndex: 0,
yAxisIndex: 0,
symbol: 'circle',
symbolRotate: null,
symbolSize: [7, 7],
z: 100,
symbolPosition: 'end',
symbolOffset: [0, 0],
itemStyle: {
color: function (param:any) {
  return '#00C0FD'
},
shadowColor: 'rgba(115, 243, 255, 1)',
shadowBlur: 6,
},
},

],
};
onMounted(() => {
let myChart = echarts.init(
document.getElementById("yjsjpm") as HTMLElement
);

myChart.setOption(option);
});
</script>

<style>

</style>